
import React, { Component } from 'react'
import { inject, observer } from "mobx-react";



@inject('todo')
@observer

class Footer extends Component {
  
  render() {
    // console.log(this.props)
    const { unFinishTodoCount, changeFilter, filter, cleantodos } = this.props.todo
    return (
      <footer className="footer">
      <span className="todo-count">
        <strong>{unFinishTodoCount}</strong> item left
      </span>
      <ul className="filters">
        <li>
          <button className={filter === 'All' ? '' : ''} onClick={() => changeFilter('All')}>All</button>
        </li>
        <li>  
          <button className={filter === 'Active' ? 'selected' : ''} onClick={() => changeFilter('Active')}>Active</button>
        </li>
        <li>
          <button className={filter === 'Completed' ? 'selected' : ''} onClick={() => changeFilter('Completed')}>Completed</button>
        </li>
      </ul>
      <button className="clear-completed" onClick={() => cleantodos()}>Clear completed</button>
    </footer>
    )
  }
}

export default Footer
